<template>
    <div
        class="item"
        @click="routerDetail"
    >

        <div class="order-item">
            <p class="title">{{info.remark}}<span v-if="info.wxinfo.id">({{info.wxinfo.nickname}})</span> </p>
            <div class="time">{{info.created}}</div>

        </div>
        <div class="order-item">
            <div class="benefit">
                {{symbol}}{{info.amount}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'moneyCellSinglee',
    data() {
        return {};
    },
    props: {
        info: {
            type: Object
        },
        type: {
            type: String
        }
    },
    computed: {
        symbol() {
            return this.info.category === '1' ? "+" : "-";
        }
    },
    watch: {
        // 监听具体数据变化，并做相应的处理
    },
    methods: {
        routerDetail() {
            //    跳转交易详情
            this.$router.push({
                name: 'record_detail',
                params: {
                    info: this.info,
                    type: this.type,
                    id: this.info.id
                }
            });

        }
    },
    beforeCreate() {
        // 可以在这加个loading事件，在加载实例时触发
        // 这个阶段实例的data、methods是读不到的
    },
    created() {
        // 初始化数据，如在这结束loading事件，异步ajax请求也适宜在这里调用
        // 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。
        // mount挂载阶段还没开始，"el" 属性目前不可见，数据并没有在DOM元素上进行渲染
    },
    beforeMount() {
        // 相关的 render 函数首次被调用。
    },
    mounted() {
        // 挂载元素，获取到DOM节点
        // el选项的DOM节点 被新创建的 vm的el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
    },
    beforeUpdate() {
        // 数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
    },
    updated() {
        //  如果对数据统一处理，在这里写上相应函数
        // 这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
    },
    beforeDestroy() {
        // 可以做一个确认停止事件的确认框
    },
    destroyed() {
        // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
    }
};

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~assets/main.styl';

.item {
    padding: smallMargin cellPadding;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .order-item {
        .title {
            word-vw(word14, gray3);
            line-height: 1.4;
        }

        .time {
            word-vw(word12, gray9);
            margin-top: titleMargin;
        }

        .price {
            word-vw(word12, gray9);
        }

        .benefit {
            word-vw(word16, gray3);
        }
    }
}
</style>
